<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>zepto_touch</title>
  <style type="text/css">
          *{
              touch-action: none;
          }
    .box{
      width: 100px;
      height: 100px;
      background: #FFFF00;
      margin: 0 auto;
      text-align: center;
      line-height: 100px;
    }
    .btn{
      width: 100px;
      height: 50px;
      background: #FF0000;
      border-radius: 10px;
      margin: 0 auto;
    }
  </style>
</head>
<body style="height: 1000px;">
		<!--
			 
			* zepto touch方法
				* tap()点击事件 利用在document上绑定touch事件来模拟tap事件的，并且tap事件会冒泡到document上
				* singleTap()  点击事件
				* doubleTap()  双击事件
				* longTap()    当一个元素被按住超过750ms触发。
				* swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过(同一个方向滑动距离大于30px)时触发。(可选择给定的方向)
				   在一个方向滑动大于30px即为滑动。否则算点击。
		-->
  <div id="box" class="box">按钮1</div>
  <br />
  <div id="box2" class="box">按钮2</div>
  <br />
  <div id="box3" class="box">按钮3</div>
  <button id="btn" class="btn">button</button>
  <script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function () {
      //tap()点击事件---真机测没问题

//      $('#box').tap(function () {
//          alert('tap事件');
//      });
      $('#box').on('tap',function () {
          alert('tap事件');
      });
      //singleTap()单击事件
      $('#box2').singleTap(function () {
          alert('我单击了一下');
      });

      //doubleTap()  双击事件
      $('#box2').doubleTap(function () {
          alert('我双击了一下');
      });

      //longTap()长按事件----按住屏幕时间超过750ms触发
      $('#box3').longTap(function () {
          alert('我长按了一下box3');
      });

      //swipe()滑动事件---在同一个方向连续滑动超过30px

//      $('#btn').swipe(function () {
//          alert('我滑动了超过30px');
//      });
      $('#btn').swipeLeft(function () {
          alert('我向左滑动了');
      });
    });
  </script>
</body>
</html>
